<template>

  <!-- 预览界面 -->
  <lam-dialog :title="title" v-if="open" :visible.sync="open" width="70%" top="5vh" append-to-body :close-on-click-modal="false"
        custom-class="el-dialog_preview" >
    <el-tabs v-model="activeName" type="card" :style="panelHeigth">
      <el-tab-pane v-for="(value, key) in data" :key="key" :label="key" :name="key" >
        <div class="pre_content" >
        	<ClipboardButton :content="value" class="pre-copy-bt"/>
        	<pre class="language-js line-numbers" v-html="toCodeHtml(key, value)" :style="preContentHeigth"></pre>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="warning" @click="close">关  闭</el-button>
    </div> -->
  </lam-dialog>

</template>

<script>
  import ClipboardButton from "@/components/ClipboardButton";
  import "prismjs/themes/prism-okaidia.css";
  import Prism from "prismjs";
  import prismJava from 'prismjs/components/prism-java'
  import prismSql from 'prismjs/components/prism-sql'
  // import prismLineNumbers from 'prismjs/plugins/line-numbers/prism-line-numbers'

  export default {
    name: "preview",
    components: {
      ClipboardButton
    },
    data() {
      return {
        open: false,
        title: "代码预览",
        height: 800,
        data: {},
        activeName: "controller.java",
      }
    },
    computed:{
      panelHeigth(){
        return 'height: '+ this.height + 'px;'
      },
      preContentHeigth(){
        return 'height: '+(this.height - 70) + 'px;'
      }
    },
    created() {
    },
    methods: {
      /** 打开预览界面 */
      openDialog(data) {
        this.height = Math.trunc(window.innerHeight * 0.8);
        this.data = data;
        this.open = true;
      },
      close(){
        this.open = false;
      },
      toCodeHtml(key, code){
        let fileType = this.getFileType(key)
        if(!Prism.languages[fileType]){
          console.log('Prism没有该语言：'+fileType)
          fileType = "js"
        }
        return Prism.highlight(code, Prism.languages[fileType], fileType);
      },
      convertName(key){
        return key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'));
      },
      getFileType(key){
        //key = this.convertName(key);
        key = key.substring(key.indexOf('.')+1);
        return key == 'vue' ? 'html':key;
      }
    }
  }
</script>

<style scoped>
  pre[class*="language-"] {
    margin: 0 !important;
  }

  .pre_content {
  	overflow-x: auto;
    background-color: #ecf2f9 ;
    margin-top: 0px;
    border: 1px solid #b9bdbf;
    border-radius: 8px;
  }
  .pre-copy-bt{
    position: absolute;
    right: 20px;
    top: 3px;
  }
  .el-dialog_preview .el-dialog__body{
    padding: 15px 20px !important;
  }
  .dialog-footer{
    text-align: center !important;
    margin-top: -40px;
  }
  .el-dialog__footer{
    padding: 10px 20px !important;
  }
</style>
